<template>
  <div class="add-service">
    <div class="top">
      <div class="blue"></div>
      新增服务信息
    </div>
    <!-- 表单上 -->
    <div class="ResidentsInformation">
      <p>居民信息</p>
      <el-form
        :inline="true"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        :model="user"
        ref="eaitRef"
        status-icon
      >
        <el-row :gutter="10">
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <!-- 姓名 -->
            <el-form-item label="姓名" prop="username">
              <el-input
                v-model="user.username"
                placeholder="请输入您的姓名"
              /> </el-form-item
          ></el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <!-- 密码 -->
            <el-form-item label="密码" prop="password">
              <el-input v-model="user.password" placeholder="请输入密码" />
            </el-form-item>
          </el-col>

          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <!-- 性别 -->
            <el-form-item label="性别" prop="sex">
              <el-select v-model="user.sex" placeholder="请选择性别">
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <!-- 出生年月 -->
            <el-form-item label="出生年月" prop="dateyear">
             
              <el-date-picker
            v-model="user.year"
            type="date"
            label="出生年月"
            placeholder="请选择出生日期"
            style="width: 100%"
          />
            </el-form-item>
          </el-col>

          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <!-- 联系电话 -->
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="user.phone" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>

          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <!-- 居住地 -->
            <el-form-item label="现居地">
              <el-input v-model="user.input" placeholder="请输入居住地址" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" :span="8">
            <!-- 居民标签 -->
            <el-form-item label="居民标签">
              <el-select
                v-model="user.value_"
                multiple
                placeholder="请选择"
                size="large"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" :offset="8" :pull="8">
            <!-- 添加家庭成员 -->
            <el-form-item label="家庭成员">
              <el-button type="success" plain>+ 选择家庭成员</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- </el-form> -->
        <!-- </div> -->
        <!-- 表单下 -->
        <el-form-item>
          <!-- <div class="service"> -->
          <p>服务信息</p>
        </el-form-item>

        <!-- <el-form
        :inline="true"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        status-icon
        > -->
        <el-row>
          <!-- 服务编号 -->
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="服务编号">
              <span>{{ Serialnumber.times }}</span>
            </el-form-item>
          </el-col>

          <!-- 签约机构 -->
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="签约机构" prop="institutions">
              <el-select
                v-model="user.institutions"
                class="m-2"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in contractor"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 服务团队 -->
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="服务团队" prop="propteam">
              <el-select v-model="user.team" class="m-2" placeholder="请选择">
                <el-option
                  v-for="item in teams"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 服务医生 -->
        <el-row>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="服务医生" prop="doctor">
              <el-select v-model="user.doctor" class="m-2" placeholder="请选择">
                <el-option
                  v-for="item in doctor"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 服务包 -->
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="服务包" prop="Servicepackage">
              <el-select
                v-model="user.Servicepackage"
                class="m-2"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in Servicepackage"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 服务项目 -->
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="服务项目" prop="project">
              <el-select
                v-model="user.project"
                class="m-2"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in project"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <!-- 服务地点 -->
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="服务地点" prop="place">
              <el-select v-model="user.place" class="m-2" placeholder="请选择">
                <el-option
                  v-for="item in place"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 服务时间 -->
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" :offset="8" :pull="8">
            <el-form-item label="服务时间" prop="timer">
              <el-date-picker
                v-model="user.timer"
                type="date"
                placeholder="请选择出生日期"
                :default-value="new Date(2010, 9, 1)"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <!-- 服务备注 -->
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="服务备注">
              <el-input
                v-model="user.note"
                type="textarea"
                placeholder="请输入备注"
                style="width: 400px"
                :autosize="{ minRows: 5, maxRows: 5 }"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item>
              <el-button type="primary" @click="onSubmit">提交</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { addUser } from '@/api/user'
import { ElMessage } from 'element-plus';
export default {
  data() {
    return {
      user: {
        institutions: "",
        team: "",
        Servicepackage: "",
        phone: "",
        doctor: "",
        year: "",
        sex: "",
        password: "",
        username: "",
        input: "",
        project: "",
        place: "",
        timer: "",
        note: "",
      },
      Serialnumber: {
        times: parseInt(new Date().getTime() / 1000),
      },
      options: [
        {
          value: "慢病护理",
          label: "慢病护理",
        },
        {
          value: "高血压",
          label: "高血压",
        },
        {
          value: "高血糖",
          label: "高血糖",
        },
        {
          value: "心脏病",
          label: "心脏病",
        },
      ],
      teams: [
        {
          value: "杨兵团队",
          label: "杨兵团队",
        },
        {
          value: "小虎团队",
          label: "小虎团队",
        },
        {
          value: "胡歌团队",
          label: "胡歌团队",
        },
      ],
      doctor: [
        {
          value: "杨兵医生",
          label: "杨兵医生",
        },
        {
          value: "小虎医生",
          label: "小虎医生",
        },
        {
          value: "胡歌医生",
          label: "胡歌医生",
        },
      ],
      Servicepackage: [
        {
          value: "基础包 ￥240",
          label: "基础包 ￥240",
        },
        {
          value: "老年人基础包 ￥340",
          label: "老年人基础包 ￥340",
        },
        {
          value: "慢性病护理包 ￥340",
          label: "慢性病护理包 ￥340",
        },
      ],
      project: [
        {
          value: "随访服务 不限次数",
          label: "随访服务 不限次数 ",
        },
        {
          value: "血糖检测 ",
          label: "血糖检测 ",
        },
        {
          value: "血压检测 ",
          label: "血压检测 ",
        },
      ],
      place: [
        {
          value: "随访人家里",
          label: "随访人家里",
        },
        {
          value: "医疗机构",
          label: "医疗机构",
        },
      ],
      rules: {
        username: [
          {
            required: true,
            message: "请输入您的姓名",
            trigger: "blur",
          },
          {
            min: 2,
            max: 5,
            message: "请输入正确的名字",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 8,
            message: "密码在八位以上",
            trigger: "blur",
          },
        ],
        sex: [
          {
            required: true,
            message: "请选择您的性别",
            trigger: "change",
          },
        ],
        dateyear: [
          {
            type: "date",
            required: false,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入你的手机号码",
            trigger: "blur",
          },
          {
            min: 11,
            max: 11,
            message: "请输入正确的手机号",
          },
        ],
        institutions: [
          {
            required: true,
            message: "请选择签约机构",
            trigger: "change",
          },
        ],
        propteam: [
          {
            required: false,
            message: "请选择服务团队",
            trigger: "change",
          },
        ],
        doctor: [
          {
            required: true,
            message: "请选择主治医师",
            trigger: "change",
          },
        ],
        Servicepackage: [
          {
            required: true,
            message: "请选择服务包",
            trigger: "change",
          },
        ],
        project: [
          {
            required: true,
            message: "请选择服务项目",
            trigger: "change",
          },
        ],
        place: [
          {
            required: true,
            message: "请选择服务地点",
            trigger: "change",
          },
        ],
      },
      contractor: [
        {
          value: "罗西社区服务中心",
          label: "罗西社区服务中心",
        },
        {
          value: "天明社区服务中心",
          label: "天明社区服务中心",
        },
        {
          value: "民进社区服务中心",
          label: "民进社区服务中心",
        },
      ],
    };
  },
  methods: {
    onSubmit() {  //提交数据时校验表单
      this.$refs.eaitRef.validate(async(isValid,invalidFields) => {
        // console.log('isValid:',isValid)
        // console.log('invalidFields:',invalidFields)
       try {
        if(isValid) {
         const result = await addUser(this.user)
          console.log("结果是：", result);
          ElMessage.success('添加成功')
          this.$router.push('waite-service')
        }
       } catch (error) {
        ElMessage.error('添加失败'+ error.message)
       }
      })  
    },
  },
};
</script>
<style lang="less" scoped>
.top {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 22px;
  margin-top: 10px;
  border-bottom: 1px solid rgba(218, 215, 215, 0.4);
  .blue {
    width: 6px;
    height: 26px;
    border-radius: 10px;
    background: blue;
    margin: 0 15px;
  }
}
.ResidentsInformation {
  min-width: 80vw;
  height: 620px;
  border-bottom: 1px solid rgba(218, 215, 215, 0.4);
  p {
    display: flex;
    justify-content: flex-start;
    font-size: 18px;
  }
}
// .service {
//   min-width: 80vw;
//   border-bottom: 1px solid rgba(218, 215, 215, 0.4);
//   p {
//     display: flex;
//     justify-content: flex-start;
//     font-size: 18px;
//   }
// }
</style>
